<template>
  <div class="iphone-button">
    <div class="iphone-content">
      <div
        v-for="(item,index ) in footList"
        :key="'foot-'+index"
        :class="index === active ? 'active': ''"
        class="button-li"
        :style="{width: getLabelWidth}"
        @click="classActive(index,item)"
      >
        <div class="li-icon" :class="item.tb" />
        <div class="li-title">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { queryAllMenuByLayOutId } from '@/api/mobile/menu'

export default {
  name: 'MobileFooter',
  props: {
    layout: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      queryColumn: {
        mid: null
      },
      footer: require('@/assets/mobile/button_01.png'),
      footList: [],
      active: 0
    }
  },
  computed: {
    getLabelWidth: function() {
      if (this.footList !== null && this.footList.length > 0) {
        return (Math.floor(100) / (this.footList.length)) + '%'
      }
      return '100%'
    }
  },
  watch: {
    layout: {
      handler(newName, old) {
        if (undefined !== newName && newName !== null) {
          this.initLayout(newName.id)
        }
      },
      immediate: false, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    }
  },
  methods: {
    initLayout(layoutId) {
      queryAllMenuByLayOutId({ lid: layoutId }).then(res => {
        const { data } = res
        if (data !== null && data.length > 0) {
          this.footList = data
          // 默认选中 第一个
          this.menu = data[0]
          this.classActive(0, this.menu)
        } else {
          this.footList = []
        }
      })
    },
    classActive(val, entity) {
      this.active = val
      this.menu = entity
      this.$emit('fact-menu', this.menu)
    }
  }
}
</script>

<style lang="scss" scoped>
.iphone-button {
  height: 60px;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  padding: 0 10px;
  box-sizing: border-box;
  background-color: #ffffff;
  color: #606266;
  position: absolute;
  z-index: 100;
}

.iphone-content {
  width: 100%;
  height: 100%;
  display: flex;
}

.button-li {
  height: 60px;
  position: relative;
}

.li-icon {
  width: 100%;
  height: 35px;
  line-height: 35px;
  text-align: center;
  font-size: 1.4rem;
}

.li-title {
  width: 100%;
  height: 25px;
  line-height: 15px;
  text-align: center;
  font-size: 0.9rem;
}

.footer-image {
  display: none;
}

.active {
  .li-icon {
    background-color: #fff;
    color: #0a84ff;
  }
  .li-title {
    color: #0a84ff;
  }
}
</style>
